<template>
	<view class="proSpecs" v-if="detailData.name">
		<u-popup :show="proSpecsState" @close="onClose" closeable round="10"
		z-index="20000"
		:overlayStyle="{zIndex:20000}">
		 <view class="proSpecsWrapper">
		 	<view class="top"></view>
			<view class="body">
				<scroll-view scroll-y="true" class="scrollView" >
					<view class="proItem">
						<product-item :item="detailData" :btnState="false" ></product-item>
					</view>
					<view class="selectWrapper" v-if="selectShow">
						<view class="list" v-for="(item,itemIndex) in detailData.sku_select" :key="item._id" >
							<view class="title">{{item.skuName}}</view>
							<view class="group">
								<view class="btn"
								 :class="skuArr.includes(child.name) ?'active':''"
								 @click="clickSelect(itemIndex,childIndex)" v-for="(child,childIndex) in item.children" :key="childIndex">{{child.name}}</view>
							</view>
						</view>
					</view>
					<view class="numSelect">
						<view class="title">购买数量</view>
						<u-number-box v-model="numValue"></u-number-box>
					</view>
				</scroll-view>
			</view>
			<view class="footer">
				<u-button color="#ff5521"
				 :disabled="confirmState" 
				 @click="clickConfirm"
				 >确认</u-button>
			</view>
		 </view>
		 </u-popup>
	</view>
</template>

<script>
	import {mapGetters,mapMutations} from "vuex"
	export default {
		name:"pro-select-specs",
		data() {
			return {
				numValue:1,
				userSelect:[]
			};
		},
		computed:{
			...mapGetters(["proSpecsState","detailData"]),
			skuArr (){
				return this.userSelect.map(item =>{
					return item.name
				})
			},
			confirmState(){
				if(this.userSelect.length == this.detailData?.sku_select?.length)
				{return false}
				else{
					return true
				}
				
			},
			selectShow(){
				return this.detailData?.sku_select?.length ?? null
			}
			
		},
		methods:{
			clickSelect(itemIndex,childIndex){
				let obj = {
					id:this.detailData.sku_select[itemIndex]._id,
					name:this.detailData.sku_select[itemIndex].children[childIndex].name}
					let index = this.userSelect.findIndex(item =>{
						return item.id == obj.id
					})
				if(index < 0){
					this.userSelect.push(obj)
				}else{
					this.userSelect.splice(index,1,obj)
				}
				
			},
			...mapMutations(["SET_SPECS_STATE","SET_DETAIL_STATE","setCarList"]),
			onClose(){
				this.SET_SPECS_STATE(false)
				this.userSelect = [],
				this.numValue = 1
			},
			clickConfirm(){
				let proItem =JSON.parse(JSON.stringify(this.detailData))
				if(this.skuArr.length)proItem.skuArr = this.skuArr
				proItem.add = true
				this.setCarList({item:proItem,num:this.numValue})
				this.onClose()
				this.SET_DETAIL_STATE(false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.proSpecsWrapper{
		height: 75vh;
		.top{
			height: 80rpx;
			width: 100%;
		}
		.body{
			height: calc(100% - 220rpx);
			.scrollView{
				height: 100%;
				padding: 0rpx 30rpx;
				.proItem{
					border-bottom: 1rpx solid $border-color-light;
				}
				.selectWrapper{
					border-bottom: 1rpx solid $border-color-light;
					padding: 10rpx 0;
					.list{
						padding: 20rpx 0;
						.title{
							font-size: 32rpx;
							font-weight: bold;
							padding-bottom: 20rpx;
						}
						.group{
							@include flex-box-set(start);
							flex-wrap: wrap;
							.btn{
								padding: 0 25rpx;
								height: 60rpx;
								border-bottom: 1prx solid $border-color-light;
								margin-left: 20rpx;
								border-radius: 10rpx;
								color: $text-font-color-2;
								margin-bottom: 20rpx;
								@include flex-box-set();
								background: $page-bg-color;
								&.active{
									border-color:$brand-theme-color;
									color: $brand-theme-color;
									background: rgba(236, 87, 79,0.1);
								}
							}
						}
					}			
				}
				
				.numSelect{
					display: flex;
					align-items: center;
					padding: 30rpx 0;
					border-bottom: 1rpx solid $border-color-light;
					.title{
						font-size: 32rpx;
						font-weight: bold;
						padding-right: 30rpx;
					}
				}
				}
		}
		
		.footer{
			height: 140rpx;
			border-top: 1rpx solid $border-color-light;
			@include flex-box();
			padding: 0 200rpx;
		}
	}
</style>